<template>
  <div class="g_warp product-list-box">
    <div class="top">
      <div class="ad"></div>
    </div>
    <div class="bottom">
      <div class="sort-box">
        <div class="sort-item">
          <span>排序:</span>
          <ul>
            <li
              v-for="(item, index) in options1"
              :key="index"
              :class="options1Current === index ? 'current' : ''"
              @click="handleOptions1Click(index, item.value)"
            >
              {{ item.text }}
            </li>
          </ul>
        </div>
        <div class="sort-item">
          <span>分类:</span>
          <ul>
            <li
              v-for="(item, index) in options2"
              :key="index"
              :class="options2Current === index ? 'current' : ''"
              @click="handleOptions2Click(index, item.value)"
            >
              {{ item.text }}
            </li>
          </ul>
        </div>
      </div>
      <div class="sort-body">
        <product-page
          v-for="item in productList"
          :key="item.id"
          :p-info="item"
        />
      </div>
      <loading :loading="loading" :hasData="hasData" @more="pushData" />
    </div>
  </div>
</template>

<script>
import ProductPage from "./Home/ProductPage.vue";
import throttle from "lodash.throttle";
import Loading from "@/components/global/Loading.vue";

let scrollCallback = null;
let timer = null;

let productTotal = 30;

let breadcrumbsTitleObj = {
  exchange: "热门兑换",
  recommend: "精品推荐",
  all: "全部商品",
};

export default {
  components: {
    ProductPage,
    Loading,
  },
  data() {
    return {
      productList: [],
      breadcrumbsTitle: "瞎几把显示",
      loading: false,
      hasData: false,
      options1: [
        {
          text: "全部",
          value: {},
        },
        {
          text: "0-500分",
          value: {
            max: 500,
            min: 0,
          },
        },
        {
          text: "500分-1000分",
          value: {
            max: 1000,
            min: 500,
          },
        },
        {
          text: "1000分-1500分",
          value: {
            max: 1500,
            min: 1000,
          },
        },
        {
          text: "1500分-2500分",
          value: {
            max: 2500,
            min: 1500,
          },
        },
      ],
      options2: [
        {
          text: "全部",
          value: "0",
        },
        {
          text: "实物商品",
          value: "1",
        },
        {
          text: "虚拟商品",
          value: "2",
        },
      ],
      options1Current: 0,
      options2Current: 0,
      max: "",
      min: "",
      type: "",
    };
  },
  created() {
    this.loading = true;
    // 无线滚动事件添加
    scrollCallback = () => {
      // 滚动条到内容区域的距离
      let scrollTop = Math.round(
        document.documentElement.scrollTop || document.body.scrollTop
      );
      // 内容区域总高度
      let scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      // 可见内容区域高度
      let clientHeight =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight;
      // 某一元素到内容区域的高度
      let publicFoot = document.querySelector("#only_footer").offsetTop;
      // 这里的意思是商品超过30个就不在加载了（ 防止出现太多而已， 没别的意思 ）
      if (this.productList.length > 30) {
        return;
      }
      if (clientHeight + scrollTop >= scrollHeight) {
        // if (clientHeight + scrollTop >= publicFoot) {
        console.log(111);
        this.pushData();
      }
    };
    // 这里使用的函数应该使用节流函数
    // 这里还可以使用 IntersectionObserver - Web API 去替换（异步的）
    window.addEventListener("scroll", throttle(scrollCallback, 500));
    // 初始化面包屑标题
    this.breadcrumbsTitle = breadcrumbsTitleObj[this.$route.query?.comeType];
    // 初始化产品列表
    timer = setTimeout(() => {
      this.productList = [
        ...new Array(8).fill(null).map(() => ({
          name:
            this.$route.query?.comeType === "all"
              ? "帆布袋"
              : this.$route.query?.comeType === "exchange"
              ? "抱枕"
              : "蒸蛋器",
          integral: "2400",
          id: (Math.random() * 10000000).toFixed(0),
          isHot: true,
          imgUrl:
            this.$route.query?.comeType === "all"
              ? "http://sc.wolfcode.cn/upload/images/product_images/20200629/c68be5b2-9b81-42a8-893f-b47fe83b25e5.png"
              : this.$route.query?.comeType === "exchange"
              ? "http://sc.wolfcode.cn/upload/images/product_images/20200630/126d9b11-fa46-47b3-8081-6e8765340bda.png"
              : "http://sc.wolfcode.cn/upload/images/product_images/20200526/d2717504-84e3-4947-86a1-afcd94fd18fa.png",
        })),
      ];
      this.loading = false;
      this.hasData = this.productList.length >= productTotal;
      clearTimeout(timer);
    }, 1000);
  },
  beforeDestroy() {
    // 页面销毁前清除 scroll 的事件监听
    window.removeEventListener("scroll", scrollCallback);
  },
  methods: {
    handleOptions1Click(index, item) {
      this.options1Current = index;
      this.max = item.max;
      this.min = item.min;
      this.query();
    },
    handleOptions2Click(index, item) {
      this.options2Current = index;
      this.type = item;
      this.query();
    },

    pushData() {
      this.loading = true;
      timer = setTimeout(() => {
        this.productList.push(
          ...new Array(6).fill(null).map(() => ({
            name:
              this.$route.query?.comeType === "all"
                ? "帆布袋"
                : this.$route.query?.comeType === "exchange"
                ? "抱枕"
                : "蒸蛋器",
            integral: "2400",
            id: (Math.random() * 10000000).toFixed(0),
            isHot: true,
            imgUrl:
              this.$route.query?.comeType === "all"
                ? "http://sc.wolfcode.cn/upload/images/product_images/20200629/c68be5b2-9b81-42a8-893f-b47fe83b25e5.png"
                : this.$route.query?.comeType === "exchange"
                ? "http://sc.wolfcode.cn/upload/images/product_images/20200630/126d9b11-fa46-47b3-8081-6e8765340bda.png"
                : "http://sc.wolfcode.cn/upload/images/product_images/20200526/d2717504-84e3-4947-86a1-afcd94fd18fa.png",
          }))
        );
        this.loading = false;
        this.hasData = this.productList.length >= productTotal;
        clearTimeout(timer);
      }, 1000);
    },
    query() {
      console.log("@this.max", this.max);
      console.log("@this.min", this.min);
      console.log("@this.type", this.type);
    },
  },
};
</script>

<style lang="less" scoped>
.product-list-box {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  .bottom {
    width: 100%;
  }
}
.top {
  margin-bottom: 40px;
}
.ad {
  width: 1200px;
  background-image: url("@/assets/img/ad.4c6b6225.png");
  height: 180px;
  // ad.4c6b6225.png
}
.sort-box,
.sort-item,
.sort-item > ul {
  display: flex;
}
.sort-box {
  flex-direction: column;
}
.sort-item + .sort-item {
  margin: 32px 0 40px;
}
.sort-item {
  span,
  ul {
    cursor: pointer;
  }
  span {
    font-weight: 700;
  }
  ul {
    margin: 0 14px 0;
    li {
      color: #999;
    }
    li:hover {
      color: #333;
    }
    li + li {
      margin: 0 12px 0;
    }
    li.current {
      color: blue;
      font-weight: 600;
    }
  }
}
.sort-body {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
</style>